<template>
	<w-container id='colection' :loading='loading' class="bg-color-pageBg">
		<w-navbar :placeholder="false" :opacity="opacity" :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'"
			:product="product" :title="pageTitle" :bgColor="bgColor" navType="goods"></w-navbar>
		<!-- 主图部分 -->
		<w-product-details-card :product='product'>
			<!-- 			<view v-if="product.goods_type==1" class="font-color-white flex flex-ai-center" slot='right' @click="rightAction">
				开盒记录
				<w-icon class='ml-4' name="arrow-img"></w-icon>
			</view> -->
		</w-product-details-card>
		<view style="background-color: #1f1f1f;">
			<!-- 藏品故事 -->
			<w-product-introduce :product='product'></w-product-introduce>
			<u-gap height="100rpx"></u-gap>
			<!-- 商品介绍 -->
			<w-product-detail :product="product" :list="list"></w-product-detail>
		</view>
		<!-- 盲盒藏品 -->
		<!-- <w-product-box :product='product'></w-product-box> -->
		<!-- 商品信息 -->
		<w-product-info-list class='mt-12' :product='product'></w-product-info-list>
		<!-- 购买须知 -->
		<w-product-buy-need class='mt-12' :product='product'></w-product-buy-need>
		<!-- 版权 -->
		<!-- <w-copyright></w-copyright> -->
		<u-gap height="100"></u-gap>
		<w-product-action :product='product'></w-product-action>
	</w-container>
</template>

<script>
	import {
		getBoxDetails,
		new_openlog
	} from '@/api/box/index.js'
	import productMixin from '@/mixins/product.js'
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		mixins: [productMixin, opacityMixin],
		data() {
			return {
				loading: false,
				id: null,
				product: {
					goods_type: 2,
					publisher: {}
				},
				list:[]
			};
		},
		onLoad({
			id,
			batch_id
		}) {
			this.id = id;
			this.getDetails();
			this.getRecord()
		},
		onPullDownRefresh() {
			this.getDetails()
		},
		methods: {
			async getDetails() {
				this.loading = true
				try {
					let res = await getBoxDetails(this.id)
					this.product = res.data;
					this.product.goods_type = 1
				} catch (e) {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			async getRecord(){
				const { data,code } = await new_openlog({blind_box_id:this.id})
				if(code != 1) return
				this.list = data
			},
			rightAction() {
				this.$u.route('/pages/blindBox/openRecord', {
					id: this.product.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	#colection {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
</style>